<template>
  <div class="bottom-bar">
    <div
      v-for="(item, index) in tabsList"
      :key="index"
      :class="[
        'navImage',
        'navPos',
        disasterStore.NavActive == item.code ? 'textActive' : ''
      ]"
      @click="switchNav(item.code)"
    >
      <img
        :src="`/images/${item.code}${
          disasterStore.NavActive == item.code ? 'select' : ''
        }.png`"
      />
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { usedisasterStore } from '@/pages/geological-disaster/store/store'
import apis from '../api/api'
const disasterStore = usedisasterStore()
const tabsList = ref([])
const switchNav = async val => {
  disasterStore.NavActive = val
  await disasterStore.mappointdisasterData()
}
const getdisasterData = () => {
  apis.disasterTypeList().then(res => {
    tabsList.value = res.data
    disasterStore.NavActive = res.data[0]?.code
  })
}
onMounted(() => {
  getdisasterData()
})
</script>
<style scoped lang="scss">
.bottom-bar {
  width: 1351px;
  height: 128px;
  background: url(@/pages/integrated-monitoring/images/navBag.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: start;
  .navImage {
    width: 98px;
    height: 100px;
    cursor: pointer;
    img {
      width: 98px;
      height: 98px;
    }
  }
  .navPos {
    margin-right: 30px;
    margin-top: -20px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #00ccff;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .textActive {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #ffd500;
    text-align: center;
    font-style: normal;
  }
  .navPos:nth-child(1),
  .navPos:nth-child(7) {
    width: 66px;
    height: 100px;
    margin-top: 9px;
    img {
      width: 66px;
      height: 66px;
    }
  }
  .navPos:nth-child(2),
  .navPos:nth-child(6) {
    width: 88px;
    height: 100px;
    margin-top: -13px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
